<template>
	<view>
		<cu-custom bgColor="bg-gradual-green">
		    <block slot="content">爱尚医疗</block>
		</cu-custom>
        <!-- 这里是对应的页面 -->
		<home v-if="PageCur=='home'"><Home></Home></home>
		<service v-if="PageCur=='service'"><Service></Service></service>
		<appointments v-if="PageCur=='appointments'"><Appointments></Appointments></appointments>
		<my v-if="PageCur=='my'"><My></My></my>
		
        <!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
        <view class="cu-bar tabbar bg-white foot">
            <!-- 首页 -->
            <view class="action" :class="PageCur=='home'?'text-green':'text-gray'" 
                data-cur="home" @click="NavChange">
                <view class="cuIcon-homefill"></view> 首页
            </view>
            <!-- 分类 -->
            <view class="action" :class="PageCur=='service'?'text-green':'text-gray'" 
                data-cur="service" @click="NavChange">
                <view class="cuIcon-similar"></view> 服务
            </view>
            <!-- 购物车、右上角有数字角标 -->
            <view class="action" :class="PageCur=='appointments'?'text-green':'text-gray'" 
                data-cur="appointments" @click="NavChange">
                <view class=".cuIcon-calendar">
                    <!-- 数字角标 -->
                    <view class="cu-tag badge">1</view>
                </view>
                预约
            </view>
            <!-- 我的、左上角红色圆点 -->
            <view class="action" :class="PageCur=='my'?'text-green':'text-gray'" 
                data-cur="my" @click="NavChange">
                <view class="cuIcon-my">
                </view>
                我的
            </view>
        </view>
	</view>
</template>
 
<script>
	import home from '../home/home.vue';
	import my from "../my/my.vue";
	import appointments from "../appointments/appointments.vue";
	import service from "../service/service.vue";
	export default {
		data() {
		    return {
				PageCur: 'home'
			}
		},
		components: {
			"Service":service,
			"Appointments":appointments,
		    'Home': home,
			"My":my
		  },
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>
